<html>
	<head>

		<script src="../js/jquery.min.js"></script>
		<script src="../js/jquery.Jcrop.js"></script>
		<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
		<link rel="stylesheet" href="demo_files/demos.css" type="text/css" />

		<script language="Javascript">
		var api_counter = 0;	
		var jcrop_api = new Array();
		function cropbox(div_name, image_path, image_size, aspect_ratio, init_value){
		  img_size = image_size.split("x");

			document.write('<img src="'+image_path+'" id="'+div_name+'" />');
			document.write('<input type=text value="'+init_value+'" id="'+div_name+'_setting" style="padding-top:5px;">');
			var temp= $.Jcrop('#'+div_name,  { bgColor: 'black', 'bgOpacity': .4,'aspectRatio':aspect_ratio,'allowResize':false});	
			show_preview(temp, aspect_ratio, img_size[0], img_size[1], init_value);
			$('#'+div_name+'_setting').change(function(){
			   show_preview(temp, aspect_ratio, img_size[0], img_size[1], $(this).val());
			});	
		}
						

    function show_preview(jcrop, aspect_ratio, p_width, p_height, position){
    	var tx=0,ty=0,tw= p_width,th= p_height;
    	p_ratio = p_width/p_height;
    	if (p_ratio>aspect_ratio){
    		tw = p_height * aspect_ratio;
    		tx = (p_width-tw) * position/100;
    	} else {
    		th = p_width / aspect_ratio;
    		ty = (p_height-th) * position/100;
    	}
    	//alert(jcrop);
    	//alert('x:'+tx+'y:'+ty+'w:'+tw+'h:'+th);
    	jcrop.aspect_ratio = aspect_ratio;
    	jcrop.setSelect([parseInt(tx),parseInt(ty),parseInt(tw+tx),parseInt(th+ty)]);
    } // end of function show_preview
    
    //show_preview(1.25, 500, 370, 50);
		</script>

	</head>

	<body>


	<script type="text/javascript">
  	cropbox('box1', 'demo_files/flowers.jpg',	'500x370', 1.4, 50);
  </script>
  	
  	<BR/> 
	<script type="text/javascript">
  	cropbox('box2', 'demo_files/flowers.jpg',	'500x370', 1, 50); 
  </script>


	</body>

</html>
